<script setup>
import {onMounted, ref, watch} from "vue"
import {Avatar, HomeFilled} from "@element-plus/icons-vue";
import {useRouter} from 'vue-router'
import {studentInfo} from '@/api/student/student'
import {getProjectInfo} from '@/api/student/project'
import {useProjectStore, useUserStore} from "@/stores"

onMounted(() => {
    handelOpenChose()
    // isLeaderInProject()
})
//----------------------变量
const router = useRouter()
const className = ref('')
const courseName = ref('管理信息系统')
const projectName = ref('')
const userStore = useUserStore()
const projectStore = useProjectStore()
const userId = ref()
//公告栏内容
const announcementDetail = ref('该项目教师端由王靖负责开发，学生端李杭杭负责前端页面开发，姜可鑫负责功能开发；袁致豪负责管理端开发')
const myTaskDetail = ref([
    '项目式教育功能测试',
    'AI智能教育功能测试',
    '班级辅助模块功能测试'])
const awaitMyTask = ref('')
const showDetail = ref(false)
const awaitDetail = ref('')
//是否为组长
const isLeader = ref(false)
//选择项目
const showProjectChose = ref(false)
const courses = ['管理信息系统']
const projects = ['生成式人工智能教育平台']
const isLoading = ref(true)
//项目历程
const projectProgress = ref('')
const showGantt = ref(false)
const showProgressEdit = ref(false)
//分工相关
const taskAllocation = ref('')

//展示公共空间 个人空间
const showPublic = ref(false)
const showPersonalTask = ref(false)
//个人空间相关
const showMyTask = ref(false)
const showEditMyTask = ref(false)
//--------------------方法
const getUserData = async () => {
    userId.value = userStore.userInfo.value.userId
    await studentInfo()
}
//是否组长
const isLeaderInProject = async () => {
    const res = await getProjectInfo();     //待后续添加项目id
    isLeader.value = res.data.data.role === 1
}
const backToHome = () => {
    projectStore.setProjectNull()
    router.push('/student/Homepage/PersonalHomepage')
}
//编辑公告
const editDetail = () => {
    showDetail.value = !showDetail.value
}
const editMyTask = () =>{
    showEditMyTask.value = !showEditMyTask.value
}
const confirmDetail = () => {
    showDetail.value = !showDetail.value
    announcementDetail.value = awaitDetail.value
}
const confirmMyTask = () => {
    showEditMyTask.value = !showEditMyTask.value

}
//选择项目
const getCoursesAndClass = () => {
    //通过id取得课程列表
    //courses.value =
    className.value = '信管一班'
}
    //判断是否需要打开选择框
const handelOpenChose = () => {

    if(projectStore.getProjectName().value!==""){
        showProjectChose.value = false
        projectName.value = projectStore.getProjectName()
        courseName.value = projectStore.getCourseName()
        className.value = projectStore.getClassName()
    }else {
        showProjectChose.value = true
        getCoursesAndClass()
    }

}
   //动态选择对应课程中项目
watch(
    courseName,
    () =>{
        /**
         * 返回格式  {code:
         *           status:
         *           data:[{},{}]
         *          }
         */
       /* const res = getProjectInfo(courseName).data.data
        for(const project in res){
            projects.value.push(project.projectName)
        }*/

        isLoading.value = false
    }
)
    //项目选择确认按钮方法
const confirmProjectChose = () => {
    const projectStore = useProjectStore()
    projectStore.setProjectName(projectName.value)
    showProjectChose.value = false
}
const count = ref(3)

const add = () => {
    count.value++
}
const onDelete = () => {
    if (count.value > 0) {
        count.value--
    }
}


//项目历程

 </script>

<template>
<!--    选择项目-->
    <el-dialog v-model="showProjectChose" title="请选择项目" :show-close="false">
        <el-form>
            <el-select
                v-model="courseName"
                class="m-2"
                placeholder="请选择课程"
                size="large"
                style="width: 240px"
            >
                <el-option
                    v-for="item in courses"
                    :key="item"
                    :label="item"
                    :value="item"
                />
            </el-select>
            <el-select
                v-if="!isLoading"
                v-model="projectName"
                class="m-2"
                placeholder="请选择项目"
                size="large"
                style="width: 240px"
                :loading="isLoading"
                loading-text="请先选择课程"
            >
                <el-option
                    v-for="item in projects"
                    :key="item"
                    :label="item"
                    :value="item"
                />
            </el-select>
        </el-form>

        <template #footer>
<span class="dialog-footer">
  <el-button type="primary" @click="confirmProjectChose">
    确定
  </el-button>
</span>
        </template>
    </el-dialog>
<!--    展示甘特图-->
    <el-dialog v-model="showGantt" :show-close="false">
        <el-image src="../../../../public/甘特图.png"></el-image>
    </el-dialog>
<!--    设置我的任务-->
    <el-dialog v-model="showEditMyTask" :show-close="false" title="设置我的任务">
        <el-form>
            <el-button @click="add">添加任务</el-button>
            <el-button @click="onDelete">删除最后一个任务</el-button>
            <el-scrollbar max-height="400px">
                <p v-for="item in count" :key="item" class="scrollbar-demo-item">
                    任务{{item}}<el-input
                        v-model="myTaskDetail[item-1]"
                        :autosize="{ minRows: 4, maxRows: 8 }"
                        placeholder="请编辑任务"
                    />
                </p>
            </el-scrollbar>

        </el-form>
        <template #footer>
                <span class="dialog-footer">
                  <el-button @click="editMyTask">取消</el-button>
                  <el-button type="primary" @click="confirmMyTask">
                    提交
                  </el-button>
                </span>
        </template>
    </el-dialog>

    <el-row style="height: 100vh;">
        <!--    菜单栏-->
        <el-container>
        <el-col :span="5" style="background: lightblue">
            <!--      班级标签-->
            <el-row style="height: 15vh;">
                <el-col :span="23">
                    <el-row style="height: 3vh;">
                        <el-icon size="30" color="white">
                            <HomeFilled @click="backToHome"/>
                        </el-icon>
                    </el-row>
                    <el-row style="height: 9vh;">
              <span>
                <h2>班级:信息管理与信息系统1班</h2>
                <br/>
                <h3>课程名:管理信息系统</h3>
               </span>
                    </el-row>
                    <el-row style="height: 3vh;"></el-row>
                </el-col>
            </el-row>
            <!--      菜单-->
            <el-row style="height: 25vh;">
                <el-col :span="24">

                        <el-menu
                            background-color="lightblue"
                            :default-active="$route.path"
                            class="el-menu-vertical-demo"
                            style="border: 0"
                            router
                        >
                            <el-menu-item index="/student/project/team" @click="showPublic=false;showPersonalTask=false">
                                <el-icon>
                                    <Avatar style="color: black"/>
                                </el-icon>
                                <span class="word-big">团队空间</span>
                            </el-menu-item>
                            <el-menu-item index="/student/project/public" @click="showPublic=true">
                                <el-icon></el-icon>
                                <span class="word-big">公共空间</span>
                            </el-menu-item>
                            <el-menu-item index="/student/project/personal" @click="showPersonalTask=true;showPublic=false">
                                <el-icon></el-icon>
                                <span class="word-big">我的任务</span>
                            </el-menu-item>
                        </el-menu>
                </el-col>

            </el-row>
<!--            团队空间-->
        <div v-show="!showPublic && !showPersonalTask">
            <!--      项目公告-->
            <el-row style="height: auto;">
                <el-col :span="24">
                    <el-card class="box-card" style="background: lightblue">
                        <template #header>
                            <div class="card-header">
                                <span>项目公告栏</span>
                                <el-button class="button" v-if="isLeader" style="background: lightblue"
                                           @click="editDetail">编辑公告
                                </el-button>
                            </div>
                        </template>
                        <div>
                            {{ announcementDetail }}
                        </div>
                    </el-card>
                    <!--     编辑公告     -->
                    <el-dialog v-model="showDetail" title="编辑公告">
                        <el-form>
                            <el-input
                                v-model="awaitDetail"
                                :autosize="{ minRows: 4, maxRows: 8 }"
                                type="textarea"
                                placeholder="请编辑"
                            />
                        </el-form>
                        <template #footer>
                <span class="dialog-footer">
                  <el-button @click="editDetail">取消</el-button>
                  <el-button type="primary" @click="confirmDetail">
                    提交
                  </el-button>
                </span>
                        </template>
                    </el-dialog>
                </el-col>

            </el-row   >
            <!--      项目历程-->
            <el-row style="height: auto;">
                <el-col :span="24">
                    <el-card class="box-card" style="background: lightblue">
                        <template #header>
                            <div class="card-header">
                                <span>项目历程</span>
                                <el-button v-if="isLeader" class="button" style="background: lightblue"
                                           @click="showProgressEdit=true">编辑历程
                                </el-button>
                                <el-button class="button" style="background: lightblue"
                                           @click="showGantt = !showGantt">查看项目甘特图
                                </el-button>
                            </div>
                        </template>
                        <div>
                            2024.12.12-2024.12.20 需求分析<br/>
                            2024.12.20-2025.1.2   UI设计<br/>
                            2025.1.2-2025.2.2     程序编写<br/>
                            2025.2.2-2025.2.10    软件测试
                        </div>
                        <template #footer>
                            <h3>当前阶段为:软件测试</h3>
                        </template>
                    </el-card>
                </el-col>
            </el-row>
            <!--      当前阶段项目分工-->
            <el-row style="height: 21vh;">
                <el-col :span="24">
                    <el-card class="box-card" style="background: lightblue">
                        <template #header>
                            <div class="card-header">
                                <span>当前阶段分工</span>
                                <el-button v-if="isLeader" class="button" style="background: lightblue"
                                           @click="showProgressEdit=true">分配工作
                                </el-button>
                            </div>
                        </template>
                        <div>
                            <p>王靖&罗展鹏：教师端功能测试</p><br/>
                            <p>姜可鑫&李杭杭：学生端功能测试</p><br/>
                            <p>袁致豪：管理端功能测试</p><br/>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <!--            个人空间-->
        <div v-show="showPersonalTask && !showPublic">
            <el-row style="height: auto;">
                <el-col :span="24">
                    <el-card class="box-card" style="background: lightblue">
                        <template #header>
                            <div class="card-header">
                                <span><h2>任务清单</h2></span>
                                <el-button class="button" style="background: lightblue"
                                           @click="editMyTask">设置我的任务
                                </el-button>
                            </div>
                        </template>
                        <div>
                            <p v-for="item in myTaskDetail " :key="item">
                                {{item}}<el-checkbox v-model="checked1" ></el-checkbox>
                            </p>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        </el-col>

            <el-container>
                <el-header>
                    <div align="center">
                        <h2>欢迎来到第一小组</h2><br/>
                        <h3>本次主题为:{{projects[0]}}</h3>
                    </div>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </el-row>


</template>

<style scoped>
.word-big {
    font-size: 18px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.box-card {
    width: auto;
}
</style>
